import {
  defaultModalFormState,
  defaultVisible,
  merchantOptions,
  tableActiveKey,
} from "./store";
import styles from "./index.module.less";
import { fetchList } from ".";
export const modalConfig = () => {
  const defineModal = {
    modalInstance: ref(null),
    loading: ref(false),
    visible: defaultVisible[tableActiveKey.value],
    maskClosable: true,
    title: ref(""),
    reverse: ref(true),
    formState: defaultModalFormState[tableActiveKey.value],
    on: {
      async finish(values: any) {
        const { formState, loading, visible } = defineModal;
        try {
          loading.value = true;
          setTimeout(() => {
            loading.value = false;
            visible.value = false;
            fetchList();
          }, 1000);
        } catch (error: any) {
          loading.value = false;
          message.error(error.message);
        }
      },
    },
    slot: {
      extra_form_item: () => {
        return (
          <>
            <div class={styles.modal_container}>
              <div class={styles.title}>
                充值订单平台主动退款功能仅限于，用户移动端内购买虚拟货币退款使用。退款将通过三方支付商家返还实际入账金额，涉及支付优惠将从退款金额扣除。
              </div>
              <div class={styles.Table}>
                <div class={styles.Thead}>
                  <div class={styles.row}>
                    <div class={styles.col}>{$t("recharge57")}</div>
                    <div class={styles.col}>{$t("recharge58")}</div>
                    <div class={styles.col}>{$t("recharge59")}</div>
                  </div>
                </div>
                <div class={styles.Tbody}>
                  <div class={styles.row}>
                    <div class={styles.col}>{$t("recharge60")}</div>
                    <div class={styles.col}>120.00</div>
                    <div class={styles.col}>
                      <a-input placeholder={$t("placeholder91")} />
                    </div>
                  </div>
                </div>
                <div class={styles.Tfoot}>
                  <div class={styles.row}>
                    <div class={styles.col}>
                      <td class={styles.cell}>{$t("recharge61")}</td>
                      <td class={styles.cell}>
                        <a-select
                          allowClear
                          placeholder={$t("placeholder54")}
                          options={merchantOptions.value}
                          style="width: 120px"
                        />
                      </td>
                    </div>
                    <div class={styles.col}>
                      <td class={styles.cell}>{$t("recharge62")}：</td>
                      <td class={[styles.cell, styles.red]}>0.00</td>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </>
        );
      },
    },
  };
  return defineModal;
};
